<template>
  <div class="switch-main-body">
    <div
      v-for="item in isAnimal ? animalList : industryList"
      :key="item.id"
      class="animal"
      :class="{activeAni: activeId === item.id}"
      @click="selectChange(item)">
      <img :src="item.icon" width="37px" height="37px" class="img-style">
      <span>{{item.designation}}</span>
    </div>
  </div>
</template>
<script>
import cattle from '@/assets/images/cattle.png';
import sheep from '@/assets/images/sheep.png';
import pig from '@/assets/images/pig.png';
import chicken from '@/assets/images/chicken.png';
import donkey from '@/assets/images/donkey.png';
import meatIndustry from '@/assets/images/meat-industry.png';
import milkIndustry from '@/assets/images/milk-industry.png';
import eggIndustry from '@/assets/images/egg-industry.png';

export default {
  props: {
    isAnimal: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      activeId: '001',
      animalList: [
        { id: '001',icon: cattle, designation: '牛类',status:'NL'},
        { id: '002',icon: sheep, designation: '羊类',status:'YL'},
        { id: '003',icon: pig, designation: '猪类',status:'ZL'},
        { id: '004',icon: chicken, designation: '鸡类',status:'JL'},
        { id: '005',icon: donkey, designation: '驴类',status:'LL'}
      ],
      industryList: [
        { id: '001',icon: meatIndustry, designation: '肉业',status:'0'},
        { id: '002',icon: milkIndustry, designation: '乳业',status:'1'},
        { id: '003',icon: eggIndustry, designation: '蛋业',status:'2'},
      ]
    }
  },
  methods: {
    selectChange(item) {
      this.activeId = item.id;
      this.$emit('change', item);
    }
  }
}
</script>
<style lang="scss">
.switch-main-body {
  position: absolute;
  z-index: 1000;
  bottom: 0;
  left: .25rem;

  .animal {
    width: 1.3rem;
    height: 0.5rem;
    background: rgba(9,36,44,0.6000);
    border: 1px solid #34FFE7;
    border-radius: 4px;
    margin-bottom: .15rem;
    font-size: .21rem;
    display: flex;
    align-items: center;
    color: #DBDBDB;
    cursor: pointer;

    .img-style {
      margin-right: .18rem;
    }
  }

  .activeAni {
    box-shadow: inset 0 0 0.15rem 0.03rem rgba(0, 206, 160, 1);
  }
}
</style>
